<template>
  <div id="app">
    <div class="navs">
      <div class="nav" v-for="item in pages" :key="item.name">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </div>
    </div>

    <router-view />
  </div>
</template>

<script>
import { MenuConf } from '@/router/index';

export default {
  name: 'App',
  data() {
    return {
      pages: [],
    };
  },
  mounted() {
    this.pages = MenuConf.map(item => ({ name: item.name, path: item.path }));
  },
};
</script>

<style lang="css">
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#app .nav {
  display: inline-block;
  padding: 10px;
}
</style>
